<template>
  <el-menu
    :default-active="activeMenu"
    mode="horizontal"
    @select="handleSelect"
    :ellipsis="false"
  > <!-- 关闭Element默认的文本省略功能，改为自定义折叠逻辑 -->
    <!-- 只渲染前visibleNumber个菜单 -->
    <template v-for="(item, index) in topMenus">
      <el-menu-item 
        :style="{'--theme': theme}" 
        :index="item.path" 
        :key="index" 
        v-if="index < visibleNumber">  <!-- 新增：通过visibleNumber控制显示数量 -->
        <svg-icon
        v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
        :icon-class="item.meta.icon"/>
        {{ item.meta.title }}
      </el-menu-item>
    </template>

    <!-- 顶部菜单超出数量时显示"更多菜单"折叠项（原始若依无此逻辑） -->
    <el-sub-menu :style="{'--theme': theme}" index="more" v-if="topMenus.length > visibleNumber">
      <template #title>更多菜单</template>
      <template v-for="(item, index) in topMenus">
        <el-menu-item
          :index="item.path"
          :key="index"
          v-if="index >= visibleNumber">  <!-- 超出的菜单放在下拉框中 -->
        <svg-icon
          v-if="item.meta && item.meta.icon && item.meta.icon !== '#'"
          :icon-class="item.meta.icon"/>
        {{ item.meta.title }}
        </el-menu-item>
      </template>
    </el-sub-menu>
  </el-menu>
</template>

<script setup>
import { constantRoutes } from "@/router"
import { isHttp } from '@/utils/validate'  // 新增：引入HTTP链接判断工具函数
import useAppStore from '@/store/modules/app'
import useSettingsStore from '@/store/modules/settings'
import usePermissionStore from '@/store/modules/permission'

// 顶部栏初始可见数量（原始若依无此变量，默认全显示）
const visibleNumber = ref(100)
// 当前激活菜单的 index
const currentIndex = ref(null)
// 隐藏侧边栏的路由列表（原始若依无此配置）
const hideList = ['/index', '/user/profile']

const appStore = useAppStore()
const settingsStore = useSettingsStore()
const permissionStore = usePermissionStore()
const route = useRoute()
const router = useRouter()

// 主题颜色
const theme = computed(() => settingsStore.theme)
// 所有的路由信息
const routers = computed(() => permissionStore.topbarRouters)

// 顶部显示菜单（逻辑与原始类似，但后续会配合visibleNumber过滤）
const topMenus = computed(() => {
  let topMenus = []
  routers.value.map((menu) => {
    if (menu.hidden !== true) {
      // 兼容顶部栏一级菜单内部跳转
      if (menu.path === '/' && menu.children) {
          topMenus.push(menu.children[0])
      } else {
          topMenus.push(menu)
      }
    }
  })
  return topMenus
})

// 处理子路由路径拼接（原始若依路由路径通常在后端定义好，前端较少处理）
const childrenMenus = computed(() => {
  let childrenMenus = []
  routers.value.map((router) => {
    for (let item in router.children) {
      // 自动拼接父路径和子路径（原始若依一般不在这里处理路径拼接）
      if (router.children[item].parentPath === undefined) {
        if(router.path === "/") {
          router.children[item].path = "/" + router.children[item].path
        } else {
          if(!isHttp(router.children[item].path)) {
            router.children[item].path = router.path + "/" + router.children[item].path
          }
        }
        router.children[item].parentPath = router.path  // 新增parentPath属性
      }
      childrenMenus.push(router.children[item])
    }
  })
  return constantRoutes.concat(childrenMenus)
})

// 默认激活的菜单（增强了侧边栏显示/隐藏逻辑）
const activeMenu = computed(() => {
  const path = route.path
  let activePath = path
  // 新增：根据路由判断是否隐藏侧边栏
  if (path !== undefined && path.lastIndexOf("/") > 0 && hideList.indexOf(path) === -1) {
    const tmpPath = path.substring(1, path.length)
    if (!route.meta.link) {
      activePath = "/" + tmpPath.substring(0, tmpPath.indexOf("/"))
      appStore.toggleSideBarHide(false)  // 显示侧边栏
    }
  } else if(!route.children) {
    activePath = path
    appStore.toggleSideBarHide(true)  // 隐藏侧边栏（原始若依无此自动隐藏逻辑）
  }
  activeRoutes(activePath)
  return activePath
})

// 新增：根据屏幕宽度计算可显示的菜单数量（原始若依无此动态计算）
function setVisibleNumber() {
  const width = document.body.getBoundingClientRect().width / 3  // 屏幕宽度三分之一
  visibleNumber.value = parseInt(width / 85)  // 每个菜单项约占85px宽度
}

// 菜单选择事件（增强了路由跳转和侧边栏联动）
function handleSelect(key, keyPath) {
  currentIndex.value = key
  const route = routers.value.find(item => item.path === key)
  // 新增：判断是否为HTTP链接，是的话新窗口打开（原始若依一般在路由配置中处理）
  if (isHttp(key)) {
    window.open(key, "_blank")
  } else if (!route || !route.children) {
    // 没有子路由时的跳转逻辑（新增了query参数处理）
    const routeMenu = childrenMenus.value.find(item => item.path === key)
    if (routeMenu && routeMenu.query) {
      let query = JSON.parse(routeMenu.query)  // 解析query参数（原始若依较少这样处理）
      router.push({ path: key, query: query })
    } else {
      router.push({ path: key })
    }
    appStore.toggleSideBarHide(true)  // 无子集时隐藏侧边栏
  } else {
    // 显示左侧联动菜单
    activeRoutes(key)
    appStore.toggleSideBarHide(false)  // 有子集时显示侧边栏
  }
}

// 新增：根据顶部菜单激活状态设置侧边栏路由（原始若依侧边栏路由通常由后端权限直接返回）
function activeRoutes(key) {
  let routes = []
  if (childrenMenus.value && childrenMenus.value.length > 0) {
    childrenMenus.value.map((item) => {
      // 根据parentPath匹配子路由
      if (key == item.parentPath || (key == "index" && "" == item.path)) {
        routes.push(item)
      }
    })
  }
  // 动态设置侧边栏路由
  if(routes.length > 0) {
    permissionStore.setSidebarRouters(routes)  // 手动设置侧边栏路由（原始若依极少这样做）
  } else {
    appStore.toggleSideBarHide(true)
  }
  return routes
}

// 新增：监听窗口大小变化，动态调整可见菜单数量（原始若依无此监听）
onMounted(() => {
  window.addEventListener('resize', setVisibleNumber)
})

onBeforeUnmount(() => {
  // 注释掉了移除事件监听的代码（可能是故意保留，存在内存泄漏风险）
  // window.removeEventListener('resize', setVisibleNumber)
})

// 重复的onMounted（原始若依通常只写一个）
onMounted(() => {
  // 注释掉了初始化可见数量的代码（可能是调试时临时注释）
  // setVisibleNumber()
})
</script>

<style lang="scss">
/* 新增：自定义顶级样式类topmenu-container，用于隔离样式 */
.topmenu-container.el-menu--horizontal > .el-menu-item {
  float: left;
  height: 50px !important;  /* 强制覆盖高度（原始若依高度可能不同） */
  line-height: 50px !important;  /* 强制覆盖行高 */
  color: black !important;  /* 文字颜色改为黑色（原始若依可能是灰色） */
  padding: 0 5px !important;  /* 调整内边距 */
  margin: 0 10px !important;  /* 调整外边距 */
  // background-color: black !important;
}

/* 激活态样式修改 */
.topmenu-container.el-menu--horizontal > .el-menu-item.is-active, 
.topmenu-container.el-menu--horizontal > .el-sub-menu.is-active .el-submenu__title {
  border-bottom: 2px solid #{'var(--theme)'} !important;  /* 使用主题色下划线（原始可能是文字变色） */
  color: #303133;
}

/* 子菜单标题样式修改 */
.topmenu-container.el-menu--horizontal > .el-sub-menu .el-submenu__title {
  float: left;
  height: 50px !important;  /* 强制高度 */
  line-height: 50px !important;  /* 强制行高 */
  color: #999093 !important;  /* 自定义颜色 */
  padding: 0 5px !important;  /* 调整内边距 */
  margin: 0 10px !important;  /* 调整外边距 */
}

/* 移除hover背景色（原始若依hover可能有浅灰背景） */
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):focus, 
.topmenu-container.el-menu--horizontal>.el-menu-item:not(.is-disabled):hover, 
.topmenu-container.el-menu--horizontal>.el-submenu .el-submenu__title:hover {
  background-color: #ffffff;  /*  hover时背景为白色 */
}

/* 图标间距调整 */
.topmenu-container .svg-icon {
  margin-right: 4px;  /* 自定义图标右间距 */
}

/* 子菜单箭头样式调整 */
.topmenu-container .el-sub-menu .el-submenu__icon-arrow {
  position: static;  /* 改变定位方式 */
  vertical-align: middle;  /* 垂直居中 */
  margin-left: 8px;  /* 调整左间距 */
  margin-top: 0px;  /* 取消上间距 */
}
</style>